<template>
  <a
    :class="[$style.btn, $style[arrow]]"
    href="javascript:void(0);"
    @click="$emit('click')"
  ><slot /><i :class="$style.arrow" /></a>
</template>

<script>
export default {
  props: {
    arrow: {
      type: String,
      default: ''
    }
  }
}
</script>

<style module>
.btn {
  color: #88b8f8;
  font-size: 16px;

  max-width: 100%;
  display: inline-block;
  box-sizing: border-box;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

  position: relative;
  padding: 3px 22px 3px 14px;
}
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #88b8f8 transparent transparent transparent;

  vertical-align: 2px;
  margin-left: 6px;
  transition: transform 0.3s ease;

  position: absolute;
  right: 8px;
  top: 11px;
}

.up .arrow {
  transform: rotate(180deg);
}
</style>
